<template>
  <div class="common-layout">
    <el-container style="height: 100%; width: 100%; margin: 0 auto">
      <!-- Header -->
      <el-header
        style="
          height: 50px;
          width: 100%;
          background-color: rgba(0, 102, 255, 0.06);
          align-items: center;
          line-height: 50px;
        "
      >
        <p class="centered-text">AI-比赛相关</p>
      </el-header>

      <!-- Main Chat Area -->
      <el-main id="chat">
        <chat v-for="(item, index) in msgList" :key="index" :msg="item"></chat>
      </el-main>

      <!-- Input Area -->
      <el-row
        style="margin: 0 auto; padding-left: 20px; padding-right: 20px"
        class="chat-input"
      >
        <div style="width: 100%" class="chat-input-container">
          <div class="chat-input">
            <el-button
              class="upload-btn"
              type="text"
              icon="el-icon-upload"
            ></el-button>
            <div class="input-area">
              <el-input
                @keyup.enter.native="sendMsg"
                :rows="1"
                :autosize="{ minRows: 1, maxRows: 4 }"
                v-model="input"
                type="textarea"
                placeholder="智能Ai查询"
                resize="none"
                style="border: none; height: 100%"
              ></el-input>
            </div>
            <el-button
              class="send-btn"
              @click="sendMsg"
              :disabled="!input.trim()"
              type="text"
              icon="el-icon-s-promotion"
            ></el-button>
          </div>
        </div>
        <!-- Disclaimer Text -->
        <div class="disclaimer">
          <p>
            服务生成的所有内容均由人工智能模型生成，其生成内容的准确性和完整性无法保证，不代表我们的态度或观点。
          </p>
        </div>
      </el-row>
    </el-container>
  </div>
</template>

<script>
import chat from "@/components/ai/chat.vue";
import { reqAi } from "@/api";

export default {
  components: {
    chat,
  },
  data() {
    return {
      input: "", // 输入
      msgList: [], // 消息列表
    };
  },
  methods: {
    async sendMsg() {
      const keyword = this.input.trim();
      if (!keyword) return;

      // 添加用户消息（不可变操作）
      this.msgList = [
        ...this.msgList,
        {
          question: keyword,
          answer: "AI生成中...",
          loading: true,
        },
      ];

      this.input = "";
      this.setScrollToBottom();

      try {
        const response = await reqAi({
          question: keyword,
        });

        // ✅ 直接使用 response.data，不需要调用 .json()
        const responseData = response.data;
        // console.log(responseData);

        // 校验响应结构
        if (!responseData || !responseData.answer) {
          throw new Error("响应数据格式异常");
        }

        // 更新消息列表（使用 Vue.set 避免响应式失效）
        const msgIndex = this.msgList.length - 1;
        this.$set(this.msgList, msgIndex, {
          ...this.msgList[msgIndex],
          answer: responseData.answer,
          loading: false,
        });

        this.setScrollToBottom();
      } catch (error) {
        console.error("API请求失败:", error);
        const msgIndex = this.msgList.length - 1;
        this.$set(this.msgList, msgIndex, {
          ...this.msgList[msgIndex],
          answer: `请求失败: ${error.message}`,
          loading: false,
        });
      }
    },
    setScrollToBottom() {
      this.$nextTick(() => {
        let chat = document.querySelector("#chat");
        if (chat) {
          chat.scrollTop = chat.scrollHeight;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.common-layout {
  height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  border: 3px solid rgba(0, 102, 255, 0.06);
  box-shadow: 0 0 25px rgba(34, 34, 34, 0.1);
  background: linear-gradient(to bottom, #ffffff, #f9f9fc);

  #chat {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    scroll-behavior: smooth;
    padding-bottom: 20px;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgba(97, 92, 237, 0.3);
      border-radius: 3px;
    }
  }

  .chat-input-container {
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #615ced;
    display: flex;
    align-items: center;
    margin-bottom: 0; // 调整为0，避免不必要的间距
    border-radius: 20px;
    box-shadow: 0 12px 24px -16px rgba(54, 54, 73, 0.04),
      0 12px 40px 0 rgba(51, 51, 71, 0.08), 0 0 1px 0 rgba(44, 44, 54, 0.02);
    transition: all 0.3s ease;

    .chat-input {
      display: flex;
      width: 100%;
      align-items: center;

      .upload-btn {
        font-size: 18px;
        color: #615ced;
        transition: color 0.2s ease;
        margin-right: 8px;

        &:hover {
          color: darken(#615ced, 10%);
        }
      }

      .input-area {
        flex: 1; // 占据剩余空间
        min-height: 40px;

        .el-textarea__inner {
          border: none !important;
          // border-left: none !important; // 强制去除左边框
          // border-right: none !important; // 强制去除右边框
          // border-top: 1px solid transparent !important; // 上边框透明
          // border-bottom: 1px solid #ccc !important; // 下边框颜色自定义
          background: transparent;
          box-shadow: none;
          resize: none;
          padding: 8px 0;
          max-height: 120px;
          line-height: 1.5;
          font-size: 15px;
          color: #333;

          &::placeholder {
            color: #aaa;
            transition: opacity 0.2s ease;
          }

          &:focus::placeholder {
            opacity: 0.5;
          }

          &:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(97, 92, 237, 0.2);
            border-color: #615ced;
          }

          /* 设置只保留上下边框 */
          border-top: 1px solid transparent;
          border-bottom: 1px solid #ccc;
        }
      }

      .send-btn {
        font-size: 18px;
        color: #615ced;
        padding: 0 8px;
        transition: all 0.2s ease;
        margin-left: 8px;

        &:hover:not(.is-disabled) {
          color: darken(#615ced, 10%);
          transform: scale(1.1);
        }

        &.is-disabled {
          color: #c8cad9;
          pointer-events: none;
          cursor: not-allowed;
          opacity: 0.6;
        }
      }
    }
  }

  .disclaimer {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    color: red; // 更改为红色
    padding: 0 20px;
    margin-bottom: 0; // 确保底部无额外间距
  }
}
</style>
